<template>
	<view v-if="props.type === 'card'" class="gy-patient">
		<view v-if="list.length > 0" class="gy-patient-card gy-custom-card">
			<view class="gy-patient-info">
				<view class="gy-patient-user">
					<view class="gy-patient-avatar">
						<com-image :src="proxy.utils.image.fullPath(current.avatar)" mode="" :width="50" :height="50" :radius="25" />
					</view>
					<text class="gy-patient-name">{{ current.name }}</text>
					ID: {{ current.hisCode }}
				</view>
				<view class="gy-patient-qrcode" @click.stop="preview = true">
					<text class="gy_icon_qrcode"></text>
				</view>
			</view>
			<view class="gy-patient-btn" @click.stop="cut = true">切换</view>
		</view>
		<view v-if="list.length === 0" class="gy-patient-card-no gy-custom-card">
			<view class="text">
				<text class="gy_icon_renyuan"></text>您未创建就诊人
			</view>
			<com-button type="secondary" @click.stop="goCreateFn">去创建</com-button>
		</view>
	</view>
	<view v-if="props.type === 'bar'" class="gy-patient">
        <view class="gy-patient-bar" :style="{backgroundColor: props.bgColor}">
            <view v-if="list.length === 0" class="tip">您未创建就诊人</view>
            <view v-if="list.length > 0" class="tip">就诊人<text>{{ current ? current.name : "" }}</text></view>
            <com-button v-if="list.length === 0 && allowSwitch" @click.stop="goCreateFn">去创建</com-button>
            <com-button v-if="list.length > 0 && allowSwitch" @click.stop="cut = true">切换</com-button>
        </view>
	</view>
	<com-patient-select :show="cut" @close="cut = false" />
	<com-patient-preview v-if="preview" :top="props.previewTop" :bgColor="props.previewBgColor" @close="preview = false" />
</template>

<script lang="ts" setup>

    import {
    	ref,
		readonly,
		computed,
		getCurrentInstance
    } from "vue";

	const { proxy }: any = getCurrentInstance();

	const emits = defineEmits(["select"]);

    const props = defineProps({
        bgColor: {
        	type: String,
            default: "#ffffff"
        },
		type: {
			type: String,
			default: "bar"
		},
		previewTop: {
			type: Number,
			default: 0
		},
		previewBgColor: {
        	type: String,
            default: "#ffffff"
        },
		allowSwitch: {
        	type: Boolean,
            default: true
        }
    });

	const preview = ref(false);

    const cut = ref(false);

	const current = computed(() => {
		setTimeout(() => {
			emits("select", proxy.store.patient.current);
		}, 500);
		return proxy.store.patient.current;
	});

	const list = computed(() => proxy.store.patient.list);

    function goCreateFn(){
		proxy.utils.uni.route.go("/pages-system/login/index");
    }

</script>

<script lang="ts">
	export default {
		options: {
			multipleSlots: true,
			styleIsolation: 'shared',
			addGlobalClass: true,
			virtualHost: true
		}
	}
</script>

<style lang="scss" scoped>
	.gy-patient{
	    .gy-patient-bar{
			@include sticky(0rpx);
	        width: 100%;
	        height: 100rpx;
	        @include flex-between-center;
	        padding: var(--gy-gap);
	        font-size: var(--gy-font-size-medium);
	        .tip{
	            color: var(--gy-text-color-secondary);
	            text{
	                margin-left: 20rpx;
	                font-weight: bold;
	                color: var(--gy-text-color-primary);
	            }
	        }
	        :deep(.gy-button.inline){
	        	height: 60rpx;
	        	padding: 0 35rpx;
	            border-radius: 30rpx;
				font-size: var(--gy-font-size-base);
	        }
	    }
		.gy-patient-card{
			@include flex-between-center;
			background: #377BEC;
			color: #ffffff;
			padding: 0;
			.gy-patient-info{
				flex: 1;
				@include flex-between-center;
				background: linear-gradient(314deg, #07BF66 0%, #5591F8 0%, #8DB7FF 100%);
				border-radius: var(--gy-border-radius-large);
				overflow: hidden;
				padding: calc(var(--gy-gap) - 10rpx);
				.gy-patient-user{
					@include flex-start-center;
					font-size: 32rpx;
					.gy-patient-avatar{
						padding: 3rpx;
						background: #ffffff;
						border-radius: 50%;
					}
					text{
						font-weight: bold;
						font-size: 32rpx;
						margin-left: 15rpx;
						margin-right: 25rpx;
					}
				}
				.gy-patient-qrcode{
					width: 70rpx;
					height: 70rpx;
					@include flex-center-center;
					text{
						font-size: 60rpx;
					}
				}
			}
			.gy-patient-btn{
				width: 70rpx;
				@include flex-center-center-column;
				writing-mode: vertical-rl;
				font-size: 28rpx;
				letter-spacing: 0.2em;
			}
		}
		.gy-patient-card-no{
			@include flex-between-center;
			color: #ffffff;
			background: linear-gradient(314deg, #07BF66 0%, #5591F8 0%, #8DB7FF 100%);
			.text{
				@include flex-start-center;
				font-size: 28rpx;
				line-height: 28rpx;
				text{
					margin-right: 5rpx;
					font-size: 30rpx;
				}
			}
			:deep(.gy-button){
				font-size: 28rpx !important;
				color: var(--gy-color-primary) !important;
				font-weight: 600;
			}
		}
	}
</style>
